<template>
  <el-card>
    <div style="margin-bottom: 20px; font-size: 20px;color: #606266;">小程序</div>
    <el-table
      :data="wxappList"
      style="width: 100%"
    >
      <el-table-column
        prop="appName"
        width="166"
        label="小程序名称"
      />

      <el-table-column
        prop="businessName"
        label="商户名称"
      />

      <el-table-column
        prop="appId"
        width="166"
        label="appId"
      />

      <el-table-column
        prop="classifyId"
        width="200px"
        label="模板类型"
      >
        <template slot-scope="scope">
          <span>【{{ classifyMap[scope.row.classifyCode] }}】</span> - <span>{{ tplMap[scope.row.classifyCode + scope.row.templateCode] }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="onlineStatus"
        label="线上小程序"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.onlineVersionId !== 0">
            <el-tag v-if="scope.row.onlineStatus === 1" :closable="false" type="success" t>{{ scope.row.onlineVersionNum }}</el-tag>
            <el-tag v-if="scope.row.onlineStatus === 0" :closable="false" type="danger">{{ scope.row.onlineVersionNum }}</el-tag>
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>

      <el-table-column
        prop="auditStatus"
        label="审核小程序"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.auditVersionId !== 0">
            <el-tag v-if="scope.row.auditStatus === 2" :closable="false" type="success" t>{{ scope.row.auditVersionNum }} - 审核中</el-tag>
            <el-tag v-if="scope.row.auditStatus === 1" :closable="false" type="danger">{{ scope.row.auditVersionNum }} - 审核不通过</el-tag>
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>

      <el-table-column
        prop="autoUpdate"
        label="自动更新"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.autoUpdate !== 0">是</div>
          <div v-else>否</div>
        </template>
      </el-table-column>

      <el-table-column
        prop="state"
        label="授权状态 "
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state === 1" :closable="false" type="success" t>正常</el-tag>
          <el-tag v-else :closable="false" type="danger" t>授权异常</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="remark"
        label="状态说明"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.state === 1">/</div>
          <div v-else>{{ scope.row.remark }}</div>
        </template>
      </el-table-column>

      <el-table-column
        prop="createTime"
        label="创建时间"
      />

      <el-table-column
        prop="option"
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button :disabled="scope.row.state !== 1" type="text" size="small" @click="handleSelect(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="pagination"
      :current-page.sync="pageNum"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script>

import { getWxappPage } from '@/api/wxapp'
import { getClassifyTplMap } from '@/api/wxappClassify'
export default {
  name: 'WxappRelation',
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      wxappList: [],
      classifyMap: {},
      tplMap: {}
    }
  },
  mounted() {
    getClassifyTplMap().then(res => {
      this.classifyMap = res.data[0]
      this.tplMap = res.data[1]
    })
    this.getWxappList()
  },
  methods: {
    handleSelect(data) {
      this.$router.push({ name: 'wxappDetail', params: { wxappRelationId: data.id } })
    },
    handleCurrentChange(data) {
      this.pageNum = data
      this.getWxappList()
    },
    getWxappList() {
      return getWxappPage({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        scope: 0
      }).then((resp) => {
        this.wxappList = resp.data.row
        this.total = resp.data.total
      })
    }
  }
}
</script>

<style>
  .pagination {
    margin-top: 10px;
  }
</style>
